<template>

	<div id="box" class="note" :style="note">
		<!--毛玻璃-->
		<div class='frosted-glass'></div>
		
		<!--帮助和语言-->
		<div class="helpandlang">
			<ul>
				<li class="help">帮助</li>
				<li class="linex">|</li>
				<li class="changelang">
			<!-- 		<button @click="changeLang">切换语言</button>
					<span>{{ $t('language.name') }}</span> -->
					<select v-model="selectedcountry"  class="changelanguage" @change="changeLang">
						<option v-for="options in countryoptions" v-bind:value="options.value">
							<span>{{ options.text }}</span>
						</option>
					</select>					
					<div class="qzicon">
					<img :src='selectedcountry' class="chianicon"/>
					</div>		
					<!-- <img src="./assets/images/Chinaicon.png" class="chianicon"> -->
				</li>
				<!-- <span>翻译后：{{ $t('language.name') }}</span> -->
			</ul>
		</div>

		<div class="controllout">
			<div id="wai">
				<!-- 左侧图片 -->
				<div class="divleft">
					<!-- <img src="./assets/logo.png" class="logpng" /> -->
					<div class="leftborder">
						<div class="leftborderimg">
							<img src="./assets/images/logo2x.png"/>
							<p>翰斯泰（苏州）医疗科技有限公司</p>
							<p>Healthtech (Suzhou) Medical Technology Co., Ltd</p>
						</div>
					</div>
				</div>
				<!--右侧框-->
				<div>
				</div>
				<div class="divright">
					
					<!--普通用户与管理员的选择-->
					<el-radio-group v-model="radio1" class="radiogroup">
						<ul>
							<li v-on:click="qh(true)">
								<el-radio-button label="普通用户" class="eluser"></el-radio-button>
							</li>
							<li v-on:click="qh(false)">
								<el-radio-button label="管理员" class="elmanager"></el-radio-button>
							</li>
						</ul>
					</el-radio-group>
					<!--选择到用户-->
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
						
						<div v-if="temp" class="userborder">
							<div class="usercout">
							<p class="userfont">账号</p>
							</div>
							<el-form-item prop="age">
								<el-input type="text" v-model.number="ruleForm.name" autocomplete="off"
									placeholder="请输入您的账号或者手机号..." class="inputusername"></el-input>
							</el-form-item>
							<div class="passowordlist">
								<p class="userpassfont">密码</p>
								<el-form-item prop="pass">
									<el-input type="password" v-model="ruleForm.pass" autocomplete="off"
										placeholder="请输入您的密码" class="inputpassword"></el-input>
								</el-form-item>
							</div>
							<div class="userforgetpassword">
								<p class="forget">忘记密码?</p>
							</div>
							<!--机构选择-->
							<div class="masterloginbtn">
								<div class="inputLine">
									<select v-model="selected">
										<option v-for="option in options" v-bind:value="option.value">
											{{ option.text }}
										</option>
									</select>
									<span>{{ selected }}</span>
								</div>
								<div class="masterloginlist">
									<el-button type="primary" @click="onSubmit" class="masterlogin">登录</el-button>
								</div>
							</div>
							<div class="loginask">
								<el-checkbox v-model="checked"></el-checkbox>
								<div class="loginasklist">
									<span class="confirmlist">登录即代表已查询和同意</span>				
												<el-button type="text" @click="dialogVisible = true">《用户协议》</el-button>												
												<el-dialog
												  title="用户协议"
												  :visible.sync="dialogVisible"
												  width="30%"
												  :before-close="handleClose"
												 >
												  <span>重要提示： 请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
									如您对本声明或本协议任何条款有异议，请停止注册或使用简书（包括jianshu.com、名称为“简书”的手机端、电脑等设备客户端应用程序，下同）软件及所提供的全部服务。
									一、序言
									1、您使用简书软件和/或服务，即视为您签署了本协议，表明您自愿接受本协议全部条款的约束，本协议将构成您与上海佰集科技有限公司（以下称我公司）就“简书”软件及服务（以下统称“简书”）之间具有约束力的法律文件。无论您是进入简书浏览网页，还是在简书上发布任何内容，或者是直接或通过各类方式（如站外API引用等）间接使用简书的行为，都将被视作已无条件接受本声明所涉全部内容。
									2、我公司有权利对本协议进行修改，我公司将在简书相关页面公告或发送通知等方式公布修改的内容，修改后的协议一经公布即有效的代替原协议。如果您不同意本协议的修改，请立即停止访问或使用简书或取消已经获得的服务；如果您选择继续访问或使用简书，则视为您已接受本协议的修改。
									3、本协议所列明的条款，并不能完全涵盖您与我公司之间所有的权利和义务。因此，我公司不定期公布的其他声明、规则、子协议等均视为本协议之补充协议，为本协议不可分割的组成部分，与本协议具有同等法律效力。
									4、如本协议与简书的补充协议不一致，以补充协议内容为准。</span>
												  <span slot="footer" class="dialog-footer">
												    <el-button @click="dialogVisible = false">取 消</el-button>
												    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
												  </span>
												</el-dialog>											
									<span class="confirmlist">和</span>								
									<el-button type="text" @click="dialogVisible1 = true">《隐私保护指导》</el-button>
												<el-dialog
												  title="隐私保护指导"
												  :visible.sync="dialogVisible1"
												  width="30%"
												  :before-close="handleClose"
												 >
												  <span>重要提示： 请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
									如您对本声明或本协议任何条款有异议，请停止注册或使用简书（包括jianshu.com、名称为“简书”的手机端、电脑等设备客户端应用程序，下同）软件及所提供的全部服务。
									一、序言
									1、您使用简书软件和/或服务，即视为您签署了本协议，表明您自愿接受本协议全部条款的约束，本协议将构成您与上海佰集科技有限公司（以下称我公司）就“简书”软件及服务（以下统称“简书”）之间具有约束力的法律文件。无论您是进入简书浏览网页，还是在简书上发布任何内容，或者是直接或通过各类方式（如站外API引用等）间接使用简书的行为，都将被视作已无条件接受本声明所涉全部内容。
									2、我公司有权利对本协议进行修改，我公司将在简书相关页面公告或发送通知等方式公布修改的内容，修改后的协议一经公布即有效的代替原协议。如果您不同意本协议的修改，请立即停止访问或使用简书或取消已经获得的服务；如果您选择继续访问或使用简书，则视为您已接受本协议的修改。
									3、本协议所列明的条款，并不能完全涵盖您与我公司之间所有的权利和义务。因此，我公司不定期公布的其他声明、规则、子协议等均视为本协议之补充协议，为本协议不可分割的组成部分，与本协议具有同等法律效力。
									4、如本协议与简书的补充协议不一致，以补充协议内容为准。</span>
												  <span slot="footer" class="dialog-footer">
												    <el-button @click="dialogVisible1 = false">取 消</el-button>
												    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
												  </span>
												</el-dialog>				
								</div>
							</div>
							
						
						</div>

					</el-form>
					<!--选择到管理员-->
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
						<div v-if="!temp" class="masterborder">
							<div class="usercout">
							<p class="userfont">账号</p>
							</div>
							<el-form-item prop="age">
								<el-input type="text" v-model.number="ruleForm.name" autocomplete="off"
									placeholder="请输入您的账号或者手机号..." class="inputusername"></el-input>
							</el-form-item>
							<div class="passowordlist">
								<p class="userpassfont">密码</p>
								<el-form-item prop="pass">
									<el-input type="password" v-model="ruleForm.pass" autocomplete="off"
										placeholder="请输入您的密码" class="inputpassword"></el-input>
								</el-form-item>
							</div>
							<div class="userforgetpassword">
								<p class="forget">忘记密码?</p>
							</div>
							<!--机构选择-->
							<div class="masterloginbtn">
								<div class="inputLine">
									<select v-model="selected">
										<option v-for="option in options" v-bind:value="option.value">
											{{ option.text }}
										</option>
									</select>
									<span>{{ selected }}</span>
								</div>
								<div class="masterloginlist">
									<el-button type="primary" @click="onSubmit" class="masterlogin">登录</el-button>
								</div>
							</div>
							<div class="loginask">
								<el-checkbox v-model="checked"></el-checkbox>
								<div class="loginasklist">
									<span class="confirmlist">登录即代表已查询和同意</span>
									<el-button type="text" @click="dialogVisible3 = true">《用户协议》</el-button>
												<el-dialog
												  title="用户协议"
												  :visible.sync="dialogVisible3"
												  width="30%"
												  :before-close="handleClose"
												 >
												  <span>重要提示： 请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
									如您对本声明或本协议任何条款有异议，请停止注册或使用简书（包括jianshu.com、名称为“简书”的手机端、电脑等设备客户端应用程序，下同）软件及所提供的全部服务。
									一、序言
									1、您使用简书软件和/或服务，即视为您签署了本协议，表明您自愿接受本协议全部条款的约束，本协议将构成您与上海佰集科技有限公司（以下称我公司）就“简书”软件及服务（以下统称“简书”）之间具有约束力的法律文件。无论您是进入简书浏览网页，还是在简书上发布任何内容，或者是直接或通过各类方式（如站外API引用等）间接使用简书的行为，都将被视作已无条件接受本声明所涉全部内容。
									2、我公司有权利对本协议进行修改，我公司将在简书相关页面公告或发送通知等方式公布修改的内容，修改后的协议一经公布即有效的代替原协议。如果您不同意本协议的修改，请立即停止访问或使用简书或取消已经获得的服务；如果您选择继续访问或使用简书，则视为您已接受本协议的修改。
									3、本协议所列明的条款，并不能完全涵盖您与我公司之间所有的权利和义务。因此，我公司不定期公布的其他声明、规则、子协议等均视为本协议之补充协议，为本协议不可分割的组成部分，与本协议具有同等法律效力。
									4、如本协议与简书的补充协议不一致，以补充协议内容为准。</span>
												  <span slot="footer" class="dialog-footer">
												    <el-button @click="dialogVisible3 = false">取 消</el-button>
												    <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
												  </span>
												</el-dialog>												
									<span class="confirmlist">和</span>
									<el-button type="text" @click="dialogVisible2 = true">《隐私保护指导》</el-button>
												<el-dialog
												  title="隐私保护指导"
												  :visible.sync="dialogVisible2"
												  width="30%"
												  :before-close="handleClose"
												 >
												  <span>重要提示： 请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
									如您对本声明或本协议任何条款有异议，请停止注册或使用简书（包括jianshu.com、名称为“简书”的手机端、电脑等设备客户端应用程序，下同）软件及所提供的全部服务。
									一、序言
									1、您使用简书软件和/或服务，即视为您签署了本协议，表明您自愿接受本协议全部条款的约束，本协议将构成您与上海佰集科技有限公司（以下称我公司）就“简书”软件及服务（以下统称“简书”）之间具有约束力的法律文件。无论您是进入简书浏览网页，还是在简书上发布任何内容，或者是直接或通过各类方式（如站外API引用等）间接使用简书的行为，都将被视作已无条件接受本声明所涉全部内容。
									2、我公司有权利对本协议进行修改，我公司将在简书相关页面公告或发送通知等方式公布修改的内容，修改后的协议一经公布即有效的代替原协议。如果您不同意本协议的修改，请立即停止访问或使用简书或取消已经获得的服务；如果您选择继续访问或使用简书，则视为您已接受本协议的修改。
									3、本协议所列明的条款，并不能完全涵盖您与我公司之间所有的权利和义务。因此，我公司不定期公布的其他声明、规则、子协议等均视为本协议之补充协议，为本协议不可分割的组成部分，与本协议具有同等法律效力。
									4、如本协议与简书的补充协议不一致，以补充协议内容为准。</span>
												  <span slot="footer" class="dialog-footer">
												    <el-button @click="dialogVisible2 = false">取 消</el-button>
												    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
												  </span>
												</el-dialog>				
								</div>
								
							</div>
						</div>
					</el-form>

		
				</div>

			</div>

			<footer class="bottomlist">
				<img src="./assets/images/guohui2x.png" class="bottomimg" />
				<span class="bottomnum">互联网备案号，互联网许可证...</span>
			</footer>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data: function() {

			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('账号不能为空'));
				}
				// setTimeout(() => {
				//   if (!Number.isInteger(value)) {
				//     callback(new Error('请输入数字值'));
				//   } else {
				//     if (value < 18) {
				//       callback(new Error('必须年满18岁'));
				//     } else {
				//       callback();
				//     }
				//   }
				// }, 1000);
			};

			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};

			return {
				dialogVisible: false,
				dialogVisible1:false,
				dialogVisible2:false,
				dialogVisible3:false,
				checked: false,
				mask: false,
				temp: true,
				note: {
					backgroundImage: "url(" + require("./assets/background.jpg") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%",

				},
				countryName: {

				},
				cityName: "请选择",
				area: [{
						"country": "组织机构",
						"city": [
							"机构1",
							"机构2",
							"机构3"
						]
					},
					{
						"country": "组织机构1",
						"city": [
							"新机构1",
							"新机构2",
							"新机构3"
						]
					},
				],
				radio1: '普通用户',
				ruleForm: {
					age: '',
					pass: '',
				},
				rules: {
					age: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}]					
				},
				selected: 'S21CTX',
				options: [{
						text: '机构码',
						value: 'S21CTX'
					},
					{
						text: '某某编号',
						value: '165456'
					},
				],
				//开始
				selectedcountry: require("./assets/images/Chinaicon.png"),
				countryoptions: [{
						text: '中文',
						value: require("./assets/images/Chinaicon.png")
					},
					{
						text: '英文',
						value: require("./assets/images/Englishicon.png")
					},
				],
				//结束
			}
		},
		methods: {
			qh: function(t) {
				this.temp = t
			},
			selectCountry(value) {
				this.cityName = this.countryName.city[0];
			},
			onSubmit() {
				this.$router.replace('/main')
				location. reload()
				console.log('submit!');
			},
			changeLang() {
				let locale = localStorage.getItem('language') || 'zh';
				let temp = locale === 'zh' ? 'en' : 'zh';
				this.$i18n.locale = temp; //改变当前语言
				localStorage.language = temp;
			},
			handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			      }				
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import url("./assets/css/login.css");
</style>
